<template>
    <div class="wrap">
        <div class="mianbao">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/frame' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>添加商品</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="box">
            <el-alert
                title="消息提示的文案"
                center
                show-icon
                :closable="false">
            </el-alert>
            <div class="steps" align-center>
                <el-steps :active="active" finish-status="success">
                    <el-step title="基本信息"></el-step>
                    <el-step title="商品参数"></el-step>
                    <el-step title="商品属性"></el-step>
                    <el-step title="商品图片"></el-step>
                    <el-step title="商品内容"></el-step>
                    <el-step title="完成"></el-step>
                </el-steps>     
            </div>
            <el-tabs v-model="activeName" :tab-position="tabPosition" style="height: 70%;" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="message">
                    <div class="ming">*商品名称</div>
                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                    <div class="ming">*商品价格</div>
                    <el-input-number v-model="price" controls-position="right" @change="handleChange"></el-input-number>
                    <div class="ming">*商品数量</div>
                    <el-input-number v-model="num" controls-position="right" @change="handleChange"></el-input-number>
                    <div class="ming">*商品重量</div>
                    <el-input-number v-model="weight" controls-position="right" @change="handleChange"></el-input-number>
                    <div class="ming">*分类</div>
                    <el-cascader  :options="options"
                            v-model="options.number"
                            :props="{ expandTrigger: 'hover' }"
                    >
                        <template slot-scope="{ data }">
                            <span >{{ data.cat_name }}</span>
                        </template>
                    </el-cascader>
                </el-tab-pane>
                <el-tab-pane label="商品参数" name="data">配置管理</el-tab-pane>
                <el-tab-pane label="商品属性" name="class">角色管理</el-tab-pane>
                <el-tab-pane label="商品图片" name="img">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-tab-pane>
                <el-tab-pane label="商品内容" name="content">
                    <el-button type="primary" @click="Productadd">主要按钮</el-button>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        data() {
            return {
                input:"",
                num:1,
                price:0,
                weight:0,
                value:"",
                fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
                active: 0,
                tabPosition: 'left',
                activeName:"message",
                options:[],
            };
        },
        async created(){
            let res =await axios({
                url:"http://47.102.159.133:8888/api/private/v1/categories",
                params:{    
                    type:[1,2,3]
                }
            })
            this.options=res.data.data
        },
        methods: {
            handleChange(value) {
                console.log(value);
                this.value=value
            },
            handleClick(tab){
                switch(tab.name){
                    case "message":
                        this.message();
                        break;
                    case "data":
                        this.data();
                        break;
                    case "class":
                        this.class();
                        break;
                    case "img":
                        this.img();
                        break;
                    case "content":
                        this.content();
                        break;
                    default:
                        console.log(7);
                }
            },
            message(){
                this.active=0
            },
            async data(){
                this.active=1
                let res =await axios({
                    url:"http://47.102.159.133:8888/api/private/v1/categories",
                    params:{    
                        type:[1,2,3]
                    }
                })
                this.options=res.data.data
            },
            class(){
                this.active=2
            },
            img(){
                this.active=3
            },
            content(){
                this.active=4
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            async  Productadd(){
                axios({
                    url:"http://47.102.159.133:8888/api/private/v1/goods",
                    method:"post",
                    params:{
                        "goods_name":this.num,
                        "goods_cat": "1,2,3",
                        "goods_price":this.price,
                        "goods_number":this.num,
                        "goods_weight":this.weight,
                        "goods_introduce":"abc",
                        "pics":this.fileList,
                        "attrs":[]
                    }
                })
                this.$message('添加成功');
                this.$router.push("/frame/goods/goodss")
            }
        }
    }
</script>

<style scoped lang="less">
    .mianbao{
        width: 100%;
        height: 30px;
        // background: red;
        float: left;
        padding-top: 20px;
    }
    .wrap{
        margin: 60px auto 0;
        width: 82vw;
        height: 82vh;
        font-size: 12px;
        // background: #ddd;
        border-radius: 10px;
        padding: 1% 0;
        .box{
            width: 98%;
            height: 98%;
            margin:0 1% ;
            .steps{
                width: 90%;
                margin:20px auto;
                // text-align: center;
            }
        }
    }
    .el-input-number{
        width: 1110px;
    }
    ::v-deep .el-input-number__decrease{
        width: 20px;
    } 
    ::v-deep  .el-input-number__increase{
        width: 20px;
        line-height: 10px;
    }
    ::v-deep .el-input__inner{
        width: 1110px;
        height: 30px;
        text-align: left;
    }
    .ming{
        font-size: 14px;
        color: #606266;
        line-height: 40px;
    }
</style>